<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./assets/codemirror-5.27.4/lib/codemirror.css">
  <link rel="stylesheet" href="./assets/codemirror-5.27.4/addon/fold/foldgutter.css">
  <link rel="stylesheet" href="./assets/codemirror-5.27.4/addon/hint/show-hint.css">
  <link rel="stylesheet" href="./assets/index.css">
  <title>G2 demos</title>
</head>

<body><script>
  /* global GLOBAL_DATA */
  /* eslint-disable no-unused-vars */
  const GLOBAL_DATA = {
    plotById: { 'arc-diagram': { id: 'arc-diagram', name: 'Arc Diagram', path: './arc.html', thumbnail: './assets/screenshots/800x600/arc.png' }, 'chord-diagram': { id: 'chord-diagram', name: 'Chord Diagram', path: './chord.html', thumbnail: './assets/screenshots/800x600/chord.png' }, 'voronoi-diagram': { id: 'voronoi-diagram', name: 'Voronoi Diagram', path: './voronoi.html', thumbnail: './assets/screenshots/800x600/voronoi.png' }, 'line-stack-plot': { id: 'line-stack-plot', name: 'Line Stack Plot', path: './area-line-stack.html', thumbnail: './assets/screenshots/800x600/area-line-stack.png' }, 'area-stack-plot': { id: 'area-stack-plot', name: 'Area Stack Plot', path: './area-stack.html', thumbnail: './assets/screenshots/800x600/area-stack.png' }, 'area-plot': { id: 'area-plot', name: 'Area Plot', path: './area.html', thumbnail: './assets/screenshots/800x600/area.png' }, 'stream-graph': { id: 'stream-graph', name: 'Stream Graph', path: './stream-graph.html', thumbnail: './assets/screenshots/800x600/stream-graph.png' }, 'bar-dodge-no-margin': { id: 'bar-dodge-no-margin', name: 'Bar Dodge No Margin', path: './bar-dodge-no-margin.html', thumbnail: './assets/screenshots/800x600/bar-dodge-no-margin.png' }, 'bar-dodge-plot': { id: 'bar-dodge-plot', name: 'Bar Dodge Plot', path: './bar-dodge.html', thumbnail: './assets/screenshots/800x600/bar-dodge.png' }, 'bar-stack-percent': { id: 'bar-stack-percent', name: 'Bar Stack Percent', path: './bar-stack-percent.html', thumbnail: './assets/screenshots/800x600/bar-stack-percent.png' }, 'bar-stack-plot': { id: 'bar-stack-plot', name: 'Bar Stack Plot', path: './bar-stack.html', thumbnail: './assets/screenshots/800x600/bar-stack.png' }, 'bar-plot': { id: 'bar-plot', name: 'Bar Plot', path: './bar.html', thumbnail: './assets/screenshots/800x600/bar.png' }, 'daily-temperatures-in-boston': { id: 'daily-temperatures-in-boston', name: 'Daily Temperatures in Boston', path: './daily-temperatures-in-boston.html', thumbnail: './assets/screenshots/800x600/daily-temperatures-in-boston.png' }, 'histogram-binning': { id: 'histogram-binning', name: 'Histogram Binning', path: './histogram-binning.html', thumbnail: './assets/screenshots/800x600/histogram-binning.png' }, 'interval-with-labels': { id: 'interval-with-labels', name: 'Interval with labels', path: './interval-labels.html', thumbnail: './assets/screenshots/800x600/interval-labels.png' }, 'polar-interval-plot': { id: 'polar-interval-plot', name: 'Polar Interval Plot', path: './polar.html', thumbnail: './assets/screenshots/800x600/polar.png' }, 'rose-plot': { id: 'rose-plot', name: 'Rose Plot', path: './rose.html', thumbnail: './assets/screenshots/800x600/rose.png' }, 'triangle-column-plot': { id: 'triangle-column-plot', name: 'Triangle Column Plot', path: './triangle-column.html', thumbnail: './assets/screenshots/800x600/triangle-column.png' }, 'waterfall-plot': { id: 'waterfall-plot', name: 'Waterfall Plot', path: './waterfall.html', thumbnail: './assets/screenshots/800x600/waterfall.png' }, 'color-map': { id: 'color-map', name: 'Color Map', path: './color-map.html', thumbnail: './assets/screenshots/800x600/color-map.png' }, 'day-hour-heatmap': { id: 'day-hour-heatmap', name: 'Day/Hour Heatmap', path: './day-hour-heatmap.html', thumbnail: './assets/screenshots/800x600/day-hour-heatmap.png' }, 'geo-projections': { id: 'geo-projections', name: 'Geo Projections', path: './geo-projections.html', thumbnail: './assets/screenshots/800x600/geo-projections.png' }, 'hexagon-binning': { id: 'hexagon-binning', name: 'Hexagon Binning', path: './hexagon-binning.html', thumbnail: './assets/screenshots/800x600/hexagon-binning.png' }, 'rectangle-binning': { id: 'rectangle-binning', name: 'Rectangle Binning', path: './rectangle-binning.html', thumbnail: './assets/screenshots/800x600/rectangle-binning.png' }, 'treemap-tiles': { id: 'treemap-tiles', name: 'Treemap Tiles', path: './treemap-tiles.html', thumbnail: './assets/screenshots/800x600/treemap-tiles.png' }, 'world-map': { id: 'world-map', name: 'World map', path: './world-map.html', thumbnail: './assets/screenshots/800x600/world-map.png' }, 'custom-shape': { id: 'custom-shape', name: 'Custom Shape', path: './custom-shape.html', thumbnail: './assets/screenshots/800x600/custom-shape.png' }, 'dash-board': { id: 'dash-board', name: 'dash board', path: './dashboard.html', thumbnail: './assets/screenshots/800x600/dashboard.png' }, 'double-line-plot': { id: 'double-line-plot', name: 'Double Line Plot', path: './double-line.html', thumbnail: './assets/screenshots/800x600/double-line.png' }, 'line-plot-with-time': { id: 'line-plot-with-time', name: 'Line Plot with Time', path: './line-time.html', thumbnail: './assets/screenshots/800x600/line-time.png' }, 'line-plot': { id: 'line-plot', name: 'Line Plot', path: './line.html', thumbnail: './assets/screenshots/800x600/line.png' }, 'smooth-line-plot': { id: 'smooth-line-plot', name: 'Smooth Line Plot', path: './smooth-line.html', thumbnail: './assets/screenshots/800x600/smooth-line.png' }, 'state-driven-charts': { id: 'state-driven-charts', name: 'State Driven Charts', path: './state-driven.html', thumbnail: './assets/screenshots/800x600/state-driven.png' }, 'facets-matrix': { id: 'facets-matrix', name: 'Facets Matrix', path: './facets-matrix.html', thumbnail: './assets/screenshots/800x600/facets-matrix.png' }, 'facets-mirror': { id: 'facets-mirror', name: 'Facets Mirror', path: './facets-mirror.html', thumbnail: './assets/screenshots/800x600/facets-mirror.png' }, 'facets-point-plot': { id: 'facets-point-plot', name: 'Facets Point Plot', path: './facets-point.html', thumbnail: './assets/screenshots/800x600/facets-point.png' }, 'funnel-plot': { id: 'funnel-plot', name: 'Funnel Plot', path: './funnel.html', thumbnail: './assets/screenshots/800x600/funnel.png' }, heatmap: { id: 'heatmap', name: 'Heatmap', path: './heatmap.html', thumbnail: './assets/screenshots/800x600/heatmap.png' }, helix: { id: 'helix', name: 'Helix', path: './helix.html', thumbnail: './assets/screenshots/800x600/helix.png' }, 'multiple-plot': { id: 'multiple-plot', name: 'Multiple Plot', path: './multiple-lines.html', thumbnail: './assets/screenshots/800x600/multiple-lines.png' }, 'pie-plot-with-custom-labels': { id: 'pie-plot-with-custom-labels', name: 'Pie Plot with Custom Labels', path: './pie-custom-labels.html', thumbnail: './assets/screenshots/800x600/pie-custom-labels.png' }, 'pie-ring-plot': { id: 'pie-ring-plot', name: 'Pie Ring Plot', path: './pie-ring.html', thumbnail: './assets/screenshots/800x600/pie-ring.png' }, 'pie-plot': { id: 'pie-plot', name: 'Pie Plot', path: './pie.html', thumbnail: './assets/screenshots/800x600/pie.png' }, 'jitter-point-plots': { id: 'jitter-point-plots', name: 'Jitter Point Plots', path: './point-one.html', thumbnail: './assets/screenshots/800x600/point-one.png' }, 'scatter-plot': { id: 'scatter-plot', name: 'Scatter Plot', path: './scatter.html', thumbnail: './assets/screenshots/800x600/scatter.png' }, 'tag-cloud': { id: 'tag-cloud', name: 'Tag Cloud', path: './tag-cloud.html', thumbnail: './assets/screenshots/800x600/tag-cloud.png' }, 'radar-plot': { id: 'radar-plot', name: 'Radar Plot', path: './radar.html', thumbnail: './assets/screenshots/800x600/radar.png' } },
    plotsByGeometry: { diagram: [{ id: 'arc-diagram', name: 'Arc Diagram', path: './arc.html', thumbnail: './assets/screenshots/800x600/arc.png' }, { id: 'chord-diagram', name: 'Chord Diagram', path: './chord.html', thumbnail: './assets/screenshots/800x600/chord.png' }, { id: 'voronoi-diagram', name: 'Voronoi Diagram', path: './voronoi.html', thumbnail: './assets/screenshots/800x600/voronoi.png' }], area: [{ id: 'line-stack-plot', name: 'Line Stack Plot', path: './area-line-stack.html', thumbnail: './assets/screenshots/800x600/area-line-stack.png' }, { id: 'area-stack-plot', name: 'Area Stack Plot', path: './area-stack.html', thumbnail: './assets/screenshots/800x600/area-stack.png' }, { id: 'area-plot', name: 'Area Plot', path: './area.html', thumbnail: './assets/screenshots/800x600/area.png' }, { id: 'stream-graph', name: 'Stream Graph', path: './stream-graph.html', thumbnail: './assets/screenshots/800x600/stream-graph.png' }], interval: [{ id: 'bar-dodge-no-margin', name: 'Bar Dodge No Margin', path: './bar-dodge-no-margin.html', thumbnail: './assets/screenshots/800x600/bar-dodge-no-margin.png' }, { id: 'bar-dodge-plot', name: 'Bar Dodge Plot', path: './bar-dodge.html', thumbnail: './assets/screenshots/800x600/bar-dodge.png' }, { id: 'bar-stack-percent', name: 'Bar Stack Percent', path: './bar-stack-percent.html', thumbnail: './assets/screenshots/800x600/bar-stack-percent.png' }, { id: 'bar-stack-plot', name: 'Bar Stack Plot', path: './bar-stack.html', thumbnail: './assets/screenshots/800x600/bar-stack.png' }, { id: 'bar-plot', name: 'Bar Plot', path: './bar.html', thumbnail: './assets/screenshots/800x600/bar.png' }, { id: 'daily-temperatures-in-boston', name: 'Daily Temperatures in Boston', path: './daily-temperatures-in-boston.html', thumbnail: './assets/screenshots/800x600/daily-temperatures-in-boston.png' }, { id: 'histogram-binning', name: 'Histogram Binning', path: './histogram-binning.html', thumbnail: './assets/screenshots/800x600/histogram-binning.png' }, { id: 'interval-with-labels', name: 'Interval with labels', path: './interval-labels.html', thumbnail: './assets/screenshots/800x600/interval-labels.png' }, { id: 'polar-interval-plot', name: 'Polar Interval Plot', path: './polar.html', thumbnail: './assets/screenshots/800x600/polar.png' }, { id: 'rose-plot', name: 'Rose Plot', path: './rose.html', thumbnail: './assets/screenshots/800x600/rose.png' }, { id: 'triangle-column-plot', name: 'Triangle Column Plot', path: './triangle-column.html', thumbnail: './assets/screenshots/800x600/triangle-column.png' }, { id: 'waterfall-plot', name: 'Waterfall Plot', path: './waterfall.html', thumbnail: './assets/screenshots/800x600/waterfall.png' }], polygon: [{ id: 'color-map', name: 'Color Map', path: './color-map.html', thumbnail: './assets/screenshots/800x600/color-map.png' }, { id: 'day-hour-heatmap', name: 'Day/Hour Heatmap', path: './day-hour-heatmap.html', thumbnail: './assets/screenshots/800x600/day-hour-heatmap.png' }, { id: 'geo-projections', name: 'Geo Projections', path: './geo-projections.html', thumbnail: './assets/screenshots/800x600/geo-projections.png' }, { id: 'hexagon-binning', name: 'Hexagon Binning', path: './hexagon-binning.html', thumbnail: './assets/screenshots/800x600/hexagon-binning.png' }, { id: 'rectangle-binning', name: 'Rectangle Binning', path: './rectangle-binning.html', thumbnail: './assets/screenshots/800x600/rectangle-binning.png' }, { id: 'treemap-tiles', name: 'Treemap Tiles', path: './treemap-tiles.html', thumbnail: './assets/screenshots/800x600/treemap-tiles.png' }, { id: 'world-map', name: 'World map', path: './world-map.html', thumbnail: './assets/screenshots/800x600/world-map.png' }], custom: [{ id: 'custom-shape', name: 'Custom Shape', path: './custom-shape.html', thumbnail: './assets/screenshots/800x600/custom-shape.png' }], dashboard: [{ id: 'dash-board', name: 'dash board', path: './dashboard.html', thumbnail: './assets/screenshots/800x600/dashboard.png' }], line: [{ id: 'double-line-plot', name: 'Double Line Plot', path: './double-line.html', thumbnail: './assets/screenshots/800x600/double-line.png' }, { id: 'line-plot-with-time', name: 'Line Plot with Time', path: './line-time.html', thumbnail: './assets/screenshots/800x600/line-time.png' }, { id: 'line-plot', name: 'Line Plot', path: './line.html', thumbnail: './assets/screenshots/800x600/line.png' }, { id: 'smooth-line-plot', name: 'Smooth Line Plot', path: './smooth-line.html', thumbnail: './assets/screenshots/800x600/smooth-line.png' }, { id: 'state-driven-charts', name: 'State Driven Charts', path: './state-driven.html', thumbnail: './assets/screenshots/800x600/state-driven.png' }], facet: [{ id: 'facets-matrix', name: 'Facets Matrix', path: './facets-matrix.html', thumbnail: './assets/screenshots/800x600/facets-matrix.png' }, { id: 'facets-mirror', name: 'Facets Mirror', path: './facets-mirror.html', thumbnail: './assets/screenshots/800x600/facets-mirror.png' }, { id: 'facets-point-plot', name: 'Facets Point Plot', path: './facets-point.html', thumbnail: './assets/screenshots/800x600/facets-point.png' }], funnel: [{ id: 'funnel-plot', name: 'Funnel Plot', path: './funnel.html', thumbnail: './assets/screenshots/800x600/funnel.png' }], heatmap: [{ id: 'heatmap', name: 'Heatmap', path: './heatmap.html', thumbnail: './assets/screenshots/800x600/heatmap.png' }], helix: [{ id: 'helix', name: 'Helix', path: './helix.html', thumbnail: './assets/screenshots/800x600/helix.png' }], multiple: [{ id: 'multiple-plot', name: 'Multiple Plot', path: './multiple-chart.html', thumbnail: './assets/screenshots/800x600/multiple-chart.png' }, { id: 'multiple-plot', name: 'Multiple Plot', path: './multiple-lines.html', thumbnail: './assets/screenshots/800x600/multiple-lines.png' }], pie: [{ id: 'pie-plot-with-custom-labels', name: 'Pie Plot with Custom Labels', path: './pie-custom-labels.html', thumbnail: './assets/screenshots/800x600/pie-custom-labels.png' }, { id: 'pie-ring-plot', name: 'Pie Ring Plot', path: './pie-ring.html', thumbnail: './assets/screenshots/800x600/pie-ring.png' }, { id: 'pie-plot', name: 'Pie Plot', path: './pie.html', thumbnail: './assets/screenshots/800x600/pie.png' }], point: [{ id: 'jitter-point-plots', name: 'Jitter Point Plots', path: './point-one.html', thumbnail: './assets/screenshots/800x600/point-one.png' }, { id: 'scatter-plot', name: 'Scatter Plot', path: './scatter.html', thumbnail: './assets/screenshots/800x600/scatter.png' }, { id: 'tag-cloud', name: 'Tag Cloud', path: './tag-cloud.html', thumbnail: './assets/screenshots/800x600/tag-cloud.png' }], radar: [{ id: 'radar-plot', name: 'Radar Plot', path: './radar.html', thumbnail: './assets/screenshots/800x600/radar.png' }] }
  };
</script>
  <div class="main">
    <div class="toc-container">
      <h2>G2 demos</h2>
      <div class="search">
        <input id="query" type="text" placeholder="search (TODO)">
      </div>
      <div class="menus"><div class="menu-item">
    <h3 class="title">
      <a href="#geometry-diagram">diagram</a>
    </h3>
    <ul class="sub-menus">
      <li class="sub-menu-item">
            <a href="#/arc-diagram">Arc Diagram</a>
          </li><li class="sub-menu-item">
            <a href="#/chord-diagram">Chord Diagram</a>
          </li><li class="sub-menu-item">
            <a href="#/voronoi-diagram">Voronoi Diagram</a>
          </li>
    </ul>
  </div><div class="menu-item">
    <h3 class="title">
      <a href="#geometry-area">area</a>
    </h3>
    <ul class="sub-menus">
      <li class="sub-menu-item">
            <a href="#/line-stack-plot">Line Stack Plot</a>
          </li><li class="sub-menu-item">
            <a href="#/area-stack-plot">Area Stack Plot</a>
          </li><li class="sub-menu-item">
            <a href="#/area-plot">Area Plot</a>
          </li><li class="sub-menu-item">
            <a href="#/stream-graph">Stream Graph</a>
          </li>
    </ul>
  </div><div class="menu-item">
    <h3 class="title">
      <a href="#geometry-interval">interval</a>
    </h3>
    <ul class="sub-menus">
      <li class="sub-menu-item">
            <a href="#/bar-dodge-no-margin">Bar Dodge No Margin</a>
          </li><li class="sub-menu-item">
            <a href="#/bar-dodge-plot">Bar Dodge Plot</a>
          </li><li class="sub-menu-item">
            <a href="#/bar-stack-percent">Bar Stack Percent</a>
          </li><li class="sub-menu-item">
            <a href="#/bar-stack-plot">Bar Stack Plot</a>
          </li><li class="sub-menu-item">
            <a href="#/bar-plot">Bar Plot</a>
          </li><li class="sub-menu-item">
            <a href="#/daily-temperatures-in-boston">Daily Temperatures in Boston</a>
          </li><li class="sub-menu-item">
            <a href="#/histogram-binning">Histogram Binning</a>
          </li><li class="sub-menu-item">
            <a href="#/interval-with-labels">Interval with labels</a>
          </li><li class="sub-menu-item">
            <a href="#/polar-interval-plot">Polar Interval Plot</a>
          </li><li class="sub-menu-item">
            <a href="#/rose-plot">Rose Plot</a>
          </li><li class="sub-menu-item">
            <a href="#/triangle-column-plot">Triangle Column Plot</a>
          </li><li class="sub-menu-item">
            <a href="#/waterfall-plot">Waterfall Plot</a>
          </li>
    </ul>
  </div><div class="menu-item">
    <h3 class="title">
      <a href="#geometry-polygon">polygon</a>
    </h3>
    <ul class="sub-menus">
      <li class="sub-menu-item">
            <a href="#/color-map">Color Map</a>
          </li><li class="sub-menu-item">
            <a href="#/day-hour-heatmap">Day/Hour Heatmap</a>
          </li><li class="sub-menu-item">
            <a href="#/geo-projections">Geo Projections</a>
          </li><li class="sub-menu-item">
            <a href="#/hexagon-binning">Hexagon Binning</a>
          </li><li class="sub-menu-item">
            <a href="#/rectangle-binning">Rectangle Binning</a>
          </li><li class="sub-menu-item">
            <a href="#/treemap-tiles">Treemap Tiles</a>
          </li><li class="sub-menu-item">
            <a href="#/world-map">World map</a>
          </li>
    </ul>
  </div><div class="menu-item">
    <h3 class="title">
      <a href="#geometry-custom">custom</a>
    </h3>
    <ul class="sub-menus">
      <li class="sub-menu-item">
            <a href="#/custom-shape">Custom Shape</a>
          </li>
    </ul>
  </div><div class="menu-item">
    <h3 class="title">
      <a href="#geometry-dashboard">dashboard</a>
    </h3>
    <ul class="sub-menus">
      <li class="sub-menu-item">
            <a href="#/dash-board">dash board</a>
          </li>
    </ul>
  </div><div class="menu-item">
    <h3 class="title">
      <a href="#geometry-line">line</a>
    </h3>
    <ul class="sub-menus">
      <li class="sub-menu-item">
            <a href="#/double-line-plot">Double Line Plot</a>
          </li><li class="sub-menu-item">
            <a href="#/line-plot-with-time">Line Plot with Time</a>
          </li><li class="sub-menu-item">
            <a href="#/line-plot">Line Plot</a>
          </li><li class="sub-menu-item">
            <a href="#/smooth-line-plot">Smooth Line Plot</a>
          </li><li class="sub-menu-item">
            <a href="#/state-driven-charts">State Driven Charts</a>
          </li>
    </ul>
  </div><div class="menu-item">
    <h3 class="title">
      <a href="#geometry-facet">facet</a>
    </h3>
    <ul class="sub-menus">
      <li class="sub-menu-item">
            <a href="#/facets-matrix">Facets Matrix</a>
          </li><li class="sub-menu-item">
            <a href="#/facets-mirror">Facets Mirror</a>
          </li><li class="sub-menu-item">
            <a href="#/facets-point-plot">Facets Point Plot</a>
          </li>
    </ul>
  </div><div class="menu-item">
    <h3 class="title">
      <a href="#geometry-funnel">funnel</a>
    </h3>
    <ul class="sub-menus">
      <li class="sub-menu-item">
            <a href="#/funnel-plot">Funnel Plot</a>
          </li>
    </ul>
  </div><div class="menu-item">
    <h3 class="title">
      <a href="#geometry-heatmap">heatmap</a>
    </h3>
    <ul class="sub-menus">
      <li class="sub-menu-item">
            <a href="#/heatmap">Heatmap</a>
          </li>
    </ul>
  </div><div class="menu-item">
    <h3 class="title">
      <a href="#geometry-helix">helix</a>
    </h3>
    <ul class="sub-menus">
      <li class="sub-menu-item">
            <a href="#/helix">Helix</a>
          </li>
    </ul>
  </div><div class="menu-item">
    <h3 class="title">
      <a href="#geometry-multiple">multiple</a>
    </h3>
    <ul class="sub-menus">
      <li class="sub-menu-item">
            <a href="#/multiple-plot">Multiple Plot</a>
          </li><li class="sub-menu-item">
            <a href="#/multiple-plot">Multiple Plot</a>
          </li>
    </ul>
  </div><div class="menu-item">
    <h3 class="title">
      <a href="#geometry-pie">pie</a>
    </h3>
    <ul class="sub-menus">
      <li class="sub-menu-item">
            <a href="#/pie-plot-with-custom-labels">Pie Plot with Custom Labels</a>
          </li><li class="sub-menu-item">
            <a href="#/pie-ring-plot">Pie Ring Plot</a>
          </li><li class="sub-menu-item">
            <a href="#/pie-plot">Pie Plot</a>
          </li>
    </ul>
  </div><div class="menu-item">
    <h3 class="title">
      <a href="#geometry-point">point</a>
    </h3>
    <ul class="sub-menus">
      <li class="sub-menu-item">
            <a href="#/jitter-point-plots">Jitter Point Plots</a>
          </li><li class="sub-menu-item">
            <a href="#/scatter-plot">Scatter Plot</a>
          </li><li class="sub-menu-item">
            <a href="#/tag-cloud">Tag Cloud</a>
          </li>
    </ul>
  </div><div class="menu-item">
    <h3 class="title">
      <a href="#geometry-radar">radar</a>
    </h3>
    <ul class="sub-menus">
      <li class="sub-menu-item">
            <a href="#/radar-plot">Radar Plot</a>
          </li>
    </ul>
  </div></div>
    </div>
    <div class="thumbnails"><div class="thumbnails-section">
    <h3 class="title" id="geometry-diagram">
      diagram
    </h3>
    <ul class="thumbnails-container">
      <li class="thumbnail-item">
            <a href="#/arc-diagram">
              <img class="thumbnail" src="./assets/screenshots/800x600/arc.png">
              <div class="description">Arc Diagram</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/chord-diagram">
              <img class="thumbnail" src="./assets/screenshots/800x600/chord.png">
              <div class="description">Chord Diagram</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/voronoi-diagram">
              <img class="thumbnail" src="./assets/screenshots/800x600/voronoi.png">
              <div class="description">Voronoi Diagram</div>
            </a>
          </li>
    </ul>
  </div><div class="thumbnails-section">
    <h3 class="title" id="geometry-area">
      area
    </h3>
    <ul class="thumbnails-container">
      <li class="thumbnail-item">
            <a href="#/line-stack-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/area-line-stack.png">
              <div class="description">Line Stack Plot</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/area-stack-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/area-stack.png">
              <div class="description">Area Stack Plot</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/area-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/area.png">
              <div class="description">Area Plot</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/stream-graph">
              <img class="thumbnail" src="./assets/screenshots/800x600/stream-graph.png">
              <div class="description">Stream Graph</div>
            </a>
          </li>
    </ul>
  </div><div class="thumbnails-section">
    <h3 class="title" id="geometry-interval">
      interval
    </h3>
    <ul class="thumbnails-container">
      <li class="thumbnail-item">
            <a href="#/bar-dodge-no-margin">
              <img class="thumbnail" src="./assets/screenshots/800x600/bar-dodge-no-margin.png">
              <div class="description">Bar Dodge No Margin</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/bar-dodge-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/bar-dodge.png">
              <div class="description">Bar Dodge Plot</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/bar-stack-percent">
              <img class="thumbnail" src="./assets/screenshots/800x600/bar-stack-percent.png">
              <div class="description">Bar Stack Percent</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/bar-stack-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/bar-stack.png">
              <div class="description">Bar Stack Plot</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/bar-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/bar.png">
              <div class="description">Bar Plot</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/daily-temperatures-in-boston">
              <img class="thumbnail" src="./assets/screenshots/800x600/daily-temperatures-in-boston.png">
              <div class="description">Daily Temperatures in Boston</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/histogram-binning">
              <img class="thumbnail" src="./assets/screenshots/800x600/histogram-binning.png">
              <div class="description">Histogram Binning</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/interval-with-labels">
              <img class="thumbnail" src="./assets/screenshots/800x600/interval-labels.png">
              <div class="description">Interval with labels</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/polar-interval-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/polar.png">
              <div class="description">Polar Interval Plot</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/rose-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/rose.png">
              <div class="description">Rose Plot</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/triangle-column-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/triangle-column.png">
              <div class="description">Triangle Column Plot</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/waterfall-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/waterfall.png">
              <div class="description">Waterfall Plot</div>
            </a>
          </li>
    </ul>
  </div><div class="thumbnails-section">
    <h3 class="title" id="geometry-polygon">
      polygon
    </h3>
    <ul class="thumbnails-container">
      <li class="thumbnail-item">
            <a href="#/color-map">
              <img class="thumbnail" src="./assets/screenshots/800x600/color-map.png">
              <div class="description">Color Map</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/day-hour-heatmap">
              <img class="thumbnail" src="./assets/screenshots/800x600/day-hour-heatmap.png">
              <div class="description">Day/Hour Heatmap</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/geo-projections">
              <img class="thumbnail" src="./assets/screenshots/800x600/geo-projections.png">
              <div class="description">Geo Projections</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/hexagon-binning">
              <img class="thumbnail" src="./assets/screenshots/800x600/hexagon-binning.png">
              <div class="description">Hexagon Binning</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/rectangle-binning">
              <img class="thumbnail" src="./assets/screenshots/800x600/rectangle-binning.png">
              <div class="description">Rectangle Binning</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/treemap-tiles">
              <img class="thumbnail" src="./assets/screenshots/800x600/treemap-tiles.png">
              <div class="description">Treemap Tiles</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/world-map">
              <img class="thumbnail" src="./assets/screenshots/800x600/world-map.png">
              <div class="description">World map</div>
            </a>
          </li>
    </ul>
  </div><div class="thumbnails-section">
    <h3 class="title" id="geometry-custom">
      custom
    </h3>
    <ul class="thumbnails-container">
      <li class="thumbnail-item">
            <a href="#/custom-shape">
              <img class="thumbnail" src="./assets/screenshots/800x600/custom-shape.png">
              <div class="description">Custom Shape</div>
            </a>
          </li>
    </ul>
  </div><div class="thumbnails-section">
    <h3 class="title" id="geometry-dashboard">
      dashboard
    </h3>
    <ul class="thumbnails-container">
      <li class="thumbnail-item">
            <a href="#/dash-board">
              <img class="thumbnail" src="./assets/screenshots/800x600/dashboard.png">
              <div class="description">dash board</div>
            </a>
          </li>
    </ul>
  </div><div class="thumbnails-section">
    <h3 class="title" id="geometry-line">
      line
    </h3>
    <ul class="thumbnails-container">
      <li class="thumbnail-item">
            <a href="#/double-line-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/double-line.png">
              <div class="description">Double Line Plot</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/line-plot-with-time">
              <img class="thumbnail" src="./assets/screenshots/800x600/line-time.png">
              <div class="description">Line Plot with Time</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/line-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/line.png">
              <div class="description">Line Plot</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/smooth-line-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/smooth-line.png">
              <div class="description">Smooth Line Plot</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/state-driven-charts">
              <img class="thumbnail" src="./assets/screenshots/800x600/state-driven.png">
              <div class="description">State Driven Charts</div>
            </a>
          </li>
    </ul>
  </div><div class="thumbnails-section">
    <h3 class="title" id="geometry-facet">
      facet
    </h3>
    <ul class="thumbnails-container">
      <li class="thumbnail-item">
            <a href="#/facets-matrix">
              <img class="thumbnail" src="./assets/screenshots/800x600/facets-matrix.png">
              <div class="description">Facets Matrix</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/facets-mirror">
              <img class="thumbnail" src="./assets/screenshots/800x600/facets-mirror.png">
              <div class="description">Facets Mirror</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/facets-point-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/facets-point.png">
              <div class="description">Facets Point Plot</div>
            </a>
          </li>
    </ul>
  </div><div class="thumbnails-section">
    <h3 class="title" id="geometry-funnel">
      funnel
    </h3>
    <ul class="thumbnails-container">
      <li class="thumbnail-item">
            <a href="#/funnel-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/funnel.png">
              <div class="description">Funnel Plot</div>
            </a>
          </li>
    </ul>
  </div><div class="thumbnails-section">
    <h3 class="title" id="geometry-heatmap">
      heatmap
    </h3>
    <ul class="thumbnails-container">
      <li class="thumbnail-item">
            <a href="#/heatmap">
              <img class="thumbnail" src="./assets/screenshots/800x600/heatmap.png">
              <div class="description">Heatmap</div>
            </a>
          </li>
    </ul>
  </div><div class="thumbnails-section">
    <h3 class="title" id="geometry-helix">
      helix
    </h3>
    <ul class="thumbnails-container">
      <li class="thumbnail-item">
            <a href="#/helix">
              <img class="thumbnail" src="./assets/screenshots/800x600/helix.png">
              <div class="description">Helix</div>
            </a>
          </li>
    </ul>
  </div><div class="thumbnails-section">
    <h3 class="title" id="geometry-multiple">
      multiple
    </h3>
    <ul class="thumbnails-container">
      <li class="thumbnail-item">
            <a href="#/multiple-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/multiple-chart.png">
              <div class="description">Multiple Plot</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/multiple-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/multiple-lines.png">
              <div class="description">Multiple Plot</div>
            </a>
          </li>
    </ul>
  </div><div class="thumbnails-section">
    <h3 class="title" id="geometry-pie">
      pie
    </h3>
    <ul class="thumbnails-container">
      <li class="thumbnail-item">
            <a href="#/pie-plot-with-custom-labels">
              <img class="thumbnail" src="./assets/screenshots/800x600/pie-custom-labels.png">
              <div class="description">Pie Plot with Custom Labels</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/pie-ring-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/pie-ring.png">
              <div class="description">Pie Ring Plot</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/pie-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/pie.png">
              <div class="description">Pie Plot</div>
            </a>
          </li>
    </ul>
  </div><div class="thumbnails-section">
    <h3 class="title" id="geometry-point">
      point
    </h3>
    <ul class="thumbnails-container">
      <li class="thumbnail-item">
            <a href="#/jitter-point-plots">
              <img class="thumbnail" src="./assets/screenshots/800x600/point-one.png">
              <div class="description">Jitter Point Plots</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/scatter-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/scatter.png">
              <div class="description">Scatter Plot</div>
            </a>
          </li><li class="thumbnail-item">
            <a href="#/tag-cloud">
              <img class="thumbnail" src="./assets/screenshots/800x600/tag-cloud.png">
              <div class="description">Tag Cloud</div>
            </a>
          </li>
    </ul>
  </div><div class="thumbnails-section">
    <h3 class="title" id="geometry-radar">
      radar
    </h3>
    <ul class="thumbnails-container">
      <li class="thumbnail-item">
            <a href="#/radar-plot">
              <img class="thumbnail" src="./assets/screenshots/800x600/radar.png">
              <div class="description">Radar Plot</div>
            </a>
          </li>
    </ul>
  </div></div>
    <div class="doc-container" style="display:none;">
      <div class="code-panel">
        <div class="code-banner"></div>
        <div class="code-editor">
          <textarea name="code" id="code"></textarea>
        </div>
      </div>
      <div class="chart-panel">
        <iframe id="preview-frame" frameborder="0"></iframe>
      </div>
    </div>
  </div>
  <script src="./assets/codemirror-5.27.4/lib/codemirror.min.js"></script>
  <script src="./assets/codemirror-5.27.4/addon/fold/foldcode.js"></script>
  <script src="./assets/codemirror-5.27.4/addon/fold/foldgutter.js"></script>
  <script src="./assets/codemirror-5.27.4/addon/fold/brace-fold.js"></script>
  <script src="./assets/codemirror-5.27.4/addon/fold/xml-fold.js"></script>
  <script src="./assets/codemirror-5.27.4/addon/fold/comment-fold.js"></script>
  <script src="./assets/codemirror-5.27.4/addon/hint/show-hint.js"></script>
  <script src="./assets/codemirror-5.27.4/addon/hint/xml-hint.js"></script>
  <script src="./assets/codemirror-5.27.4/addon/hint/html-hint.js"></script>
  <script src="./assets/codemirror-5.27.4/mode/xml/xml.js"></script>
  <script src="./assets/codemirror-5.27.4/mode/javascript/javascript.js"></script>
  <script src="./assets/codemirror-5.27.4/mode/css/css.js"></script>
  <script src="./assets/codemirror-5.27.4/mode/htmlmixed/htmlmixed.js"></script>
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="./assets/lodash-4.17.4.min.js"></script>
  <script src="./assets/routie-0.3.2.min.js"></script>
  <script src="./assets/index.js"></script>



</body></html>